<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>会员昵称</title>

	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />

	<style>
		.username-warn {
			font-size: 12px;
			margin: 20px 15px;
		}

		.username-warn>span {
			background-size: 22px 22px;
			background-position: left center;
			background-repeat: no-repeat;
			padding-left: 22px;
		}

		.username-warn>span.big {
			background-image: url(../../image/big/username_icon_warn.png);
		}

		.username-warn>span.small {
			background-image: url(../../image/small/username_icon_warn.png);
		}
	</style>

</head>

<body>
	<div id="blank" class="header">
		<div v-back.tapmode class="back"></div>
		<span class="title">昵称</span>
	</div>
	<div id="app" class="main-container">
		<input id="input" v-model="nickname" type="text" placeholder="请输入您的昵称"
			style="font-size:14px;margin-top:10px;padding-left:15px;width:100%;height:46px;line-height:normal;background-color:white;outline: none;">
		<a class="btn-commit" v-myclick="updNickname">提交</a>
	</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>
	var user;
	apiready = function () {
		setBSImg();
		new Vue({
			el: '#blank'
		});
		user = JSON.parse(getPrefs('user'));
		initApp();
		api.parseTapmode();
		addListeners();
	};

	function initApp() {
		var vm = new Vue({
			el: '#app',
			data: {
				nickname: api.pageParam.nickname,
				BSImg: {
					big: Vue.BSImg == 'big',
					small: Vue.BSImg == 'small'
				}
			},
			watch: {
				nickname: function (n, o) {
					this.nameByte = n.replace(/[^\x00-\xff]/g, "xx").length;
					if (this.nameByte > 24) {
						this.nickname = o;
					}
				}
			},
			methods: {
				updNickname: function () {
					if (this.nickname == user.nickname) {
						alert('修改失败:与当前昵称相同');
						return;
					} else if (!this.nickname.trim()) {
						alert('修改失败:昵称为空');
						return;
					}
					showProgress();
					var data = {
						member_id: getPrefs('member_id'),
						nickname: this.nickname
					};
					var callback = function (ret) {
						api.sendEvent({
							name: 'updUser',
							extra: {
								nickname: vm.nickname,
							}
						});
						setPrefs('username', vm.nickname);
						var user = JSON.parse(getPrefs('user'));
						user.nickname = vm.nickname
						setPrefs('user', user);	

						onPageEnd();
						api.closeWin();
					};
					pinet.post(URL.updUserInfo, data, callback);
				},
			},
			mounted: function () {
				var input = document.getElementById('input');
			},
			watch:{
				nickname(name){
					if( /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig.test(name)){
						api.alert({
							title: '提示',
							msg: '昵称中不能包含表情等特殊符号',
							buttons: ['确定']
						}, function (ret, err) {});
					}
				}
			}
		});
	}

	function addListeners() {
		api.addEventListener({
			name: 'viewappear'
		}, function () {
			onPageStart();
		});

		api.addEventListener({
			name: 'viewdisappear'
		}, function (ret, err) {
			onPageEnd();
		});

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			onPageEnd();
			api.closeWin();
		});
	}
</script>

</html>